<script setup lang="ts">
import { useStorage } from '@vueuse/core'
import { beautifyTime } from '~/utils/tools'
import renderContent from '~/pages/template/renderContent.vue'

defineProps<{
  res: any
}>()
const isShow = ref<boolean>(false)
// 左侧展示用户
const leftUser = ref<any>('')
// 右侧展示用户自己
const rightUser = ref<any>('')
onMounted(() => {
  const talkUser = useStorage('talk_detail', '')
  if (talkUser.value)
    leftUser.value = JSON.parse(talkUser.value)

  const myself = useStorage('user', '')
  if (myself.value)
    rightUser.value = JSON.parse(myself.value)

  isShow.value = true
})
</script>

<template>
  <div v-if="isShow" py-16px>
    <!-- 左侧 -->
    <div v-if="res.fromUser === leftUser.userId" flex flex-a-c>
      <div>
        <a-avatar :image-url="leftUser.face" :size="32" />
      </div>
      <div ml-5px>
        <div mb-5px flex flex-a-c text-12px>
          <div color-warmgray>
            {{ beautifyTime(res.createTime) }}
          </div>
        </div>
        <renderContent :text="res.text" />
      </div>
    </div>
    <!-- 右侧 -->
    <div v-else flex justify-end flex-a-c overflow-hidden py-16px>
      <div mr-5px>
        <div mb-5px flex flex-justify-end flex-a-c text-12px>
          <div color-gray>
            {{ beautifyTime(res.createTime) }}
          </div>
        </div>
        <renderContent :text="res.text" />
      </div>
      <div>
        <a-avatar v-if="rightUser.___role === 'STORE'" :image-url="rightUser.storeLogo" :size="32" />
        <a-avatar v-if="rightUser.___role === 'BUYER'" :image-url="rightUser.face" :size="32" />
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
